<template>
  <div>
      <h1>当前求和为：{{num}}</h1>
      <h2>放大十倍后为：{{bigNum}}</h2>
      <h2>我在{{school}}学习{{subject}}</h2>
      <select v-model.number="addNumTotal">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <button @click="addNum">+</button>
      <button @click="cutNum">-</button>
      <button @click="oddAddNum">当前和为奇数再加</button>
      <button @click="waitAddNum">等一等再加</button>
  </div>
</template>

<script>
// 引入mapState用来精简computed中state数据的代码
// 引入mapGetters用来精简computed中state数据的代码
import { mapGetters, mapState } from 'vuex';
export default {
    data(){
    return {
      addNumTotal:1,
    }
  },
  components:{
      
  },
  methods: {
    // addNum不是复杂的行为，可以直接越过dispatch()到actions这一环，直接通过commit()来改变state
    addNum(){
      // 直接commit 越过了actions的dispatch这一环
     this.$store.commit('ADD',this.addNumTotal);
    },
    cutNum(){
     this.$store.commit('CUT',this.addNumTotal);
    },
    oddAddNum(){
     this.$store.dispatch('oddAdd',this.addNumTotal);
    },
    waitAddNum(){
      this.$store.dispatch('addWait',this.addNumTotal);
    }
  },
  computed:{
    // 通过computed精简代码，使得模板中可以简化代码
    // num(){
    //   return this.$store.state.num;
    // },
    // school(){
    //   return this.$store.state.school;
    // },
    // subject(){
    //   return this.$store.state.subject;
    // },
    // bigNum(){
    //   return this.$store.getters.bigNum;
    // },
    // 但还是不够精简，有什么方式能够再次精简计算属性中重复的代码？

    // 通过vuex中的map...的4中方法可以精简
    // 1.mapState 精简this.$store.state
    // num(){
    //   return this.$store.state.num;
    // },
    // school(){
    //   return this.$store.state.school;
    // },
    // subject(){
    //   return this.$store.state.subject;
    // },
    // 第一种map写法：对象
    // 因为mapState最终执行结果是一个对象，而computed中接收的是方法，所以需要在前面使用ES6点语法来展开mapState
    // ...mapState({num:'num',school:'school',subject:'subject'}),

    // 第二种map写法：数组
    // 这种写法要求方法名和 【this.$store.state.数据名】 这里的数据名一致才能够精简
    ...mapState(['num','school','subject']),


    // bigNum(){
    //   return this.$store.getters.bigNum;
    // },
    // 与mapState相同的操作mapGetters同样能够精简Getters中在computed中的代码
    // 2.mapGetters
    // ...mapGetters({bigNum:'bigNum'}),
    ...mapGetters(['bigNum']),
  },
  mounted() {
    console.log('Count',this);
  },
}
</script>

<style scoped>
 
</style>